<template>
  <div class="img-group-con">
    <div :key="'img-box-' + index" ref="img-box" class="img-box" v-for="(item, index) in imgList">
      <div class="img-box-close" v-if="showDeleBtn && showDelete" @click="() => { deleteEve(item, index) }"><a-icon
          type="delete" /></div>
      <img :src="item.dataUrl || item.url" class="img" @click="showImg(item)"
        v-if="!showItemIcon(item.suffix || getFileSuffix(item.url))">
      <a-result v-if="item.status" :status="item.status" :title="item.statusTitle" style="padding: 6px 32px;"></a-result>
      <!-- 当不是图片时显示相应的图标 -->
      <span :class="['iconfont icon-size img-box-icon', getItemIcon(item.suffix || getFileSuffix(item.url))]"
        v-if="!item.status && showItemIcon(item.suffix || getFileSuffix(item.url))" @click="showImg(item)"></span>

      <div v-if="item.title && item.title.length > 0" ref="img-title" :title="item.title" class="title img-title"
        @click="showImg(item)">{{ titleList[index] }}</div>
    </div>
    <div v-if="imgList.length == 0" class="img-box-not-data">暂无数据</div>
    <PreviewShow :config="config" :url="url" :suffix="suffix" :event="psEvent"></PreviewShow>
  </div>
</template>

<script>
// import { adddWatermark } from './../utils/Watermark'
// import { addPDFWaterMark } from './../utils/WaterMark2PDF'
const getFileSuffix = (filePath) => {
  if (!filePath) {
    return ''
  }
  var startIndex = filePath.lastIndexOf(".");
  if (startIndex != -1)
    return filePath.substring(startIndex + 1, filePath.length).toLowerCase();
  else return "";
}
const fileIcon = {
  pdf: 'icon-pdf',
  ppt: 'icon-ppt',
  pptx: 'icon-ppt',
  doc: 'icon-word',
  docx: 'icon-word',
  xlsx: 'icon-excel',
  xls: 'icon-excel',
  zip: 'icon-zip',
  rar: 'icon-zip',
  txt: 'icon-txt',
  jpg: 'icon-tupian',
  png: 'icon-tupian',
  jpeg: 'icon-tupian',
  'wz': 'icon-weizhigeshi',
}

function convert(url) {
  url = url.replace(/(.*\/)*([^.]+).*/ig, "$2");
  return url;
}
// document.getElementsByClassName('img-box')[0].clientWidth
export default {
  name: 'ImgGroup',
  props: {
    value: { type: Array },
    // 判断是否显示深处按钮
    showDeleBtn: { type: Boolean, default: () => { return false } },
    // 删除事件
    deleteEvent: { type: Function }
  },
  data() {
    return {
      imgList: [
        // {url:'http://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/qsb/idCard/1667219411398_%E8%BA%AB%E4%BB%BD%E8%AF%81%E6%AD%A3%E9%9D%A2(1).jpg', title:'说明：营业执照'},
        // {url:'http://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/qsb/idCard/1667219411398_%E8%BA%AB%E4%BB%BD%E8%AF%81%E6%AD%A3%E9%9D%A2(1).jpg', title:'说明：身份证'},
        // {url:'http://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/qsb/idCard/1667219411398_%E8%BA%AB%E4%BB%BD%E8%AF%81%E6%AD%A3%E9%9D%A2(1).jpg', title:''},
      ],
      titleList: [],
      config: {
        visible: false,
        title: '',
      },
      url: '',
      suffix: '',
      showDelete: true,
      conW:198
    }
  },
  watch: {
    deleteEvent: {
      async handler(val) {
        if (Object.prototype.toString.call(val) === '[object Function]') {
          this.showDelete = true
        } else {
          this.showDelete = false
        }
      },
      deep: true,
      immediate: true
    },
    value: {
      async handler(val) {
        // console.log('@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@2',val);
        if (Object.prototype.toString.call(val) === '[object Array]') {
          const tempArr = []
          const titleArr = []
          // this.imgList = tempArr
          // const pdf = ['pdf', 'PDF']
          for (let index = 0; index < val.length; index++) {
            const item = val[index];
            // console.log('&&&&&&&&&&&&&&&&&&&&&&&&&&&&&77',item,Object.prototype.toString.call(item));
            if (Object.prototype.toString.call(item) === '[object String]') {
              // this.addWatermark(item).then(res => {
              //   this.imgList.push({ url: res.url, dataUrl: '', title: '', suffix: res.suffix })
              // })
              const res = await this.AddWatermark.addWatermark(item)
              const tempTitle = convert(res.url) +'.'+res.suffix
              tempArr.push({ url: res.url, dataUrl: '', title: tempTitle, suffix: res.suffix })
              titleArr.push(this.showTitle(tempTitle))
            }
            if (Object.prototype.toString.call(item) === '[object Object]') {
              // this.addWatermark(item.url).then(res => {
              //   this.imgList.push({ url: res.url, dataUrl: '', title: item.title, suffix: res.suffix })
              // })
              if (item.status) {
                tempArr.push({ ...item })

              } else {
                const res = await this.AddWatermark.addWatermark(item.url)
                tempArr.push({ url: res.url, dataUrl: '', title: item.title, suffix: res.suffix })
                titleArr.push(this.showTitle(item.title))
              }
            }
          }

          this.titleList = titleArr
          this.imgList = tempArr
        }

      },
      deep: true,
      immediate: true
    },
  },
  updated(){
    const conW = this.$refs['img-box']&& this.$refs['img-box'][0]&& this.$refs['img-box'][0].clientWidth
    localStorage.setItem('conW',conW)

  },
  methods: {
    showTitle(title) {
      if(!title){
        return ''
      }
      // console.log('showTitle===>',title);
      const w_ = localStorage.getItem('conW')
      if(w_ && w_!='undefined'){
        this.conW = ~~w_
      }
      // const conW =document.getElementsByClassName('img-box')[0].clientWidth
      let tempTitle = title
      const conW = this.conW  // this.$refs['img-box'][0].clientWidth || 198
      const titleInfoArr = title.split('.')
      const titleInfoArrLength = titleInfoArr.length
      const  names = [...titleInfoArr]
      names.pop()
      let newName = names.join('.')
      const nameLength = newName.length * 12
      const hzLength =  titleInfoArr[titleInfoArrLength-1].length * 6
      const baseLength = conW - hzLength - 30

      const subEndNum = baseLength / 12
      if (baseLength <= nameLength) {
        newName = names.join('.').substring(0, subEndNum)+'...'
      }
      tempTitle = newName + "." + titleInfoArr[titleInfoArrLength-1]
      // console.log('showTitle*******************', conW, nameLength, baseLength, newName,subEndNum,titleInfoArr);
      return tempTitle
    },
    deleteEve(item, index) {
      this.deleteEvent && this.deleteEvent(item, index)
    },
    getItemIcon(fileSuffix) {
      return fileIcon[fileSuffix]
    },
    showItemIcon(fileSuffix) {
      const notShowList = ['jpg', 'png', 'jpeg']
      if (notShowList.indexOf(fileSuffix) >= 0) {
        return false
      }
      return true
    },
    getFileSuffix: getFileSuffix,
    showImg(imgInfo) {
      this.config.title = imgInfo.title || ''
      // this.url = [imgInfo.url,'https://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/qsb/businessLicense/1679968661043_%E5%B0%8F%E7%BA%A2%E4%B9%A6(%E7%AC%AC%E5%9B%9B%E7%89%88).pdf']
      this.url = imgInfo.url //['https://zxcloud.oss-cn-hangzhou.aliyuncs.com/user/task/deliverables/1679882880287_%E6%9D%9C%E5%90%AF%E5%AE%97-%E6%84%8F%E5%A4%96%E9%99%A9%E7%94%B5%E5%AD%90%E4%BF%9D%E5%8D%9520221126-20231125-53.04.pdf','https://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/qsb/businessLicense/1679968661043_%E5%B0%8F%E7%BA%A2%E4%B9%A6(%E7%AC%AC%E5%9B%9B%E7%89%88).pdf']
      // this.suffix = [imgInfo.suffix,'pdf']
      this.suffix = imgInfo.suffix
      this.config.visible = true
    },
    psEvent(type) {
      if (type == 'close') {
        this.config.visible = false
        this.url = ''
      }
    }
  }
}
</script>

<style lang="less">
.img-group-con {
  width: 100%;
  height: 240px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  // padding: 5px 10px;
  padding: 5px 0;
  overflow: auto;

  .img-box {
    width: 250px;
    height: 85%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    border: 1px dashed #022ea04d;
    border-radius: 4px;
    padding: 5px;
    margin: 5px 5px;
    position: relative;
    overflow: auto;

    .img-box-close {
      cursor: pointer;
      position: absolute;
      right: 3px;
      top: 0px;
      z-index: 10;
    }

    .img {
      flex: 1;
      width: auto;
      height: calc(100% - 40px);
      cursor: pointer;
    }

    .img-box-icon {
      height: calc(100% - 25px);
      font-size: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
    .icon-excel{
      color: rgb(16,124,65);
    }
    .icon-zip{

      color: rgb(255,210,87);
    }
    .icon-pdf, .icon-ppt{
      color: rgb(222,0,17);
    }

    .title {
      width: 100%;
      height: 25px;
      line-height: 16px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #2a5699;
      overflow: hidden;
      // white-space: nowrap;
      // text-overflow: ellipsis;
      cursor: pointer;
      position: absolute;
      bottom: 0px;
      left: 0px;
      z-index: 5;
      background-color: #e5eaf987;
      // background-color: #e5eaf987;
      padding: 5px 5px;
      text-decoration: underline;
      text-align: center;
    }
  }

  .img-box-not-data {
    width: 250px;
    height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: 1px dashed #ccc;
    border-radius: 4px;
    padding: 5px;
    margin: 5px 10px;
    color: rgba(0, 0, 0, 0.25);
  }
}

.icon-size {
  color: #2a5699; // #f5222d;
  font-size: 100px;
}
</style>
